<template>
  <div>
    <el-dialog :title="$t('teamDoc.creation')" v-model="create_visibleDialog" width="480px" :append-to-body="true"
      :close-on-click-modal="false" @close="create_closeClick" @open="create_openClick">
      <div v-loading="createTeamLoading" class="info_box">
        <el-form ref="ruleFormRef" :model="FormTeamDatas" :rules="teamRules" label-position="top">
          <el-form-item :label="$t('teamDoc.possessor')">
            <div class="department">
              <div class="row_info">
                <div class="iconbg">
                  <svg-icon icon-class="zu" />
                </div>

                <div class="dept_text">
                  <el-tooltip class="item" effect="dark" :content="deptStringFunc() + '/' + user.nickname"
                    placement="top-start">
                    <span>
                      <span>{{ deptStringFunc() }}/</span>
                      <span class="text_color">{{ user.nickname }}</span>
                    </span>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('teamDoc.teamName')" prop="fileName">
            <el-input v-model="FormTeamDatas.fileName" autocomplete="off" show-word-limit maxlength="32"></el-input>
          </el-form-item>
          <el-form-item :label="$t('teamDoc.spaceSize')" prop="roomSize">
            <template #label>
              <span>{{ $t('teamDoc.spaceSize') }}</span>
              <span class="space_size_limit">{{ $t('teamDoc.spaceNum') }}{{ `(${spaceSizeLimitCount}
                ${spaceSizeLimitUnit})`
                }}</span>
            </template>
            <div class="roomSize">
              <el-input-number v-model="FormTeamDatas.roomSize" :min="1" :max="20"></el-input-number>
              <el-select v-model="FormTeamDatas.unitSize" placeholder="请选择" style="width: 80px;margin-left: 10px;margin-bottom: 4px;">
                <el-option v-for="(item, index) in sizeUnitList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item :label="$t('teamDoc.teamDescription')"><el-input v-model="FormTeamDatas.digest"
              class="textareaClass" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" show-word-limit
              maxlength="80"></el-input></el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer create_box">
        <el-button :disabled="createTeamLoading"  @click="create_closeClick">{{ $t('commen.cancel')
          }}</el-button>
        <el-button :disabled="createTeamLoading" type="primary" @click="create_confirmClick(ruleFormRef)">{{
          $t('commen.confirm')
          }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import useUserStore from "@/store/modules/user"
import { apiTeamPost, apiCoreConfigGetByConfigCode } from "@/api/teamKnowdge/teamDocApi"
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'


const create_visibleDialog = ref(false)
const createTeamLoading = ref(false)
const userStore = useUserStore()
const { proxy } = getCurrentInstance() as any
const spaceSizeLimitCount = ref(20)
const spaceSizeLimitUnit = ref("GB")

const ruleFormRef = ref<FormInstance>()
const sizeUnitList = ref([
  { label: "GB", value: "GB" },
  { label: "TB", value: "TB" }
])




const user = reactive({
  nickname: userStore.nickname,
  id: userStore.userId,
})
const FormTeamDatas = reactive({
  fileName: "",
  digest: "",
  roomSize: 5,
  unitSize: "GB",
  managersName: "",
  managers: ""
})
const teamRules = reactive({
  fileName: [{ required: true, message: '请输入团队名称', trigger: 'blur' }],
})

const open_createDialog = () => {
  create_visibleDialog.value = true
}

const create_closeClick = () => {
  create_visibleDialog.value = false
  ruleFormRef.value?.resetFields()
}
const create_openClick = async () => {
  // const res = await apiCoreConfigGetByConfigCode({
  //   configCode: "TEAM_MAXSIZE"
  // })
  // if (res.code == 200) {
  //   spaceSizeLimitCount.value = res.data.configValue
  //   spaceSizeLimitUnit.value = res.data.configUnit
  // }
}
const deptStringFunc = () => {
  return userStore.deptName
}
const create_confirmClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await apiTeamPost({
        space: proxy.$yuUtils.unitBigToSmall(FormTeamDatas.roomSize, FormTeamDatas.unitSize),
        teamName: FormTeamDatas.fileName,
        managers: user.id,
        instructions: FormTeamDatas.digest
      })
      if (res.code == 200) {
        ElMessage.success("创建成功")
        emit("refreshDatas")
        create_closeClick()
      }
    } else {
      console.log('error submit!', fields)
    }
  })

}
const emit = defineEmits(["refreshDatas"])
defineExpose({
  open_createDialog
})

</script>



<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 5px 20px;
}

.create_box {
  :deep(.el-button--text) {
    padding: 9px 15px;
    color: #aaa;
  }

  :deep(.el-button--text:hover) {
    color: #6698ff;
  }

  :deep(.el-button--primary) {
    background-color: #6698ff;
    border-color: #6698ff;
  }

  :deep(.el-button--primary:focus) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }

  :deep(.el-button--primary:hover) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }
}

.info_box {
  :deep(.el-form-item__label) {
    color: #3d3d3d;
    font-family: "Microsoft YaHei";
    padding-bottom: 5px;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}

.department {
  width: 100%;
  height: 33px;
  //   background: #f5f5f5;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #dcdfe6;

  .row_info {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    margin-left: 12px;
    color: #afafaf;
  }

  .text_color {
    color: #3d3d3d;
  }

  .iconbg {
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 10px;
    background-color: #6698ff;
    color: #fff;
    margin: 0px 5px;
    text-align: center;

    .icon_size {
      font-size: 13px;
    }
  }

  .dept_text {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1; //元素几行显示
    -webkit-box-orient: vertical;
  }
}

.roomSize {
  :deep(.el-input-number__decrease) {
    background-color: #fff !important;
  }

  :deep(.el-input-number__increase) {
    background-color: #fff !important;
  }
}

.space_size_limit {
  font-size: 12px;
  margin-left: 10px;
}
</style>
